// 信息提交
import { Button, Cell, Collapse } from "@taroify/core";
import { View } from "@tarojs/components";
import React, { useState } from "react";

type TInfoSubmiterProps = {
  signatureImg?: {
    image: string;
    canvas: HTMLCanvasElement | null;
  };
};

const InfoSubmiter: React.FC<TInfoSubmiterProps> = ({ signatureImg }) => {
  const [value, setValue] = useState([0]);

  return (
    <View className="min-h-[80vh] pb-8">
      <View className="mb-2">
        <View className="mb-2 font-semibold">检查信息</View>
        <View className="flex flex-col gap-1 p-2 bg-white">
          <Cell title="检查人员">李安全员</Cell>
          <Cell title="会议时间">2023-11-01</Cell>
          <Cell title="月度">2023-11</Cell>
        </View>
      </View>
      <View className="mb-2">
        <View className="mb-2 font-semibold">整体检查结果</View>
        <View className="flex flex-col gap-1 p-2 bg-white">
          <View className="">检查项数: 0</View>
          <View className="">不符合项数: 0</View>
          <View className="">不适用项数: 0</View>
        </View>
      </View>
      <View className="">
        <View className="mb-2 font-semibold">各项检查结果</View>
        <View className="bg-white">
          <Collapse value={value} onChange={setValue}>
            <Collapse.Item title="月调度记录">
              <View className="">
                <View className="">检查项数: 0</View>
                <View className="">不符合项数: 0</View>
                <View className="">不适用项数: 0</View>
              </View>
            </Collapse.Item>
            <Collapse.Item title="会议纪要">
              <View className="">
                <View className="">检查项数: 0</View>
                <View className="">不符合项数: 0</View>
                <View className="">不适用项数: 0</View>
              </View>
            </Collapse.Item>
            <Collapse.Item title="会议主要内容">
              <View className="">
                <View className="">检查项数: 0</View>
                <View className="">不符合项数: 0</View>
                <View className="">不适用项数: 0</View>
              </View>
            </Collapse.Item>
          </Collapse>
        </View>
      </View>
      <View className="">
        <View className="my-2 font-semibold">检查人员</View>
        <View>
          <img src={signatureImg?.image} alt="" />
        </View>
      </View>
      <View className="">
        <View className="my-2 font-semibold">每月食品安全检查电子记录</View>
        <View className="flex flex-row items-center justify-between flex-nowrap">
          <View className="flex-1 text-left">《月调度检查记录》.pdf</View>
          <View className="flex flex-row justify-end flex-1 gap-1 text-right text-gray-700">
            <Button variant="text" size="small">
              预览
            </Button>
            <Button variant="text" size="small">
              下载
            </Button>
          </View>
        </View>
      </View>
    </View>
  );
};

export default InfoSubmiter;
